<template>
  <div class="">
    <el-table :data="msgList">
      <el-table-column label="编号" align="center" prop="id" width="100" />
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="消息" align="center" prop="message" />
      <el-table-column label="用户账户" align="center" prop="user.username" width="120" />
      <el-table-column label="用户名称" align="center" prop="user.name" width="120" />
      <el-table-column label="类型" align="center" prop="is_read">
        <template #default="scope">
          <span v-if="scope.row.type == 200">考试测试</span>
          <span v-else>普通消息</span>
        </template>
      </el-table-column>
      <el-table-column label="是否阅读" align="center" prop="is_read">
        <template #default="scope">
          <span v-if="scope.row.is_read == 200">已读</span>
          <span v-else>未读</span>
        </template>
      </el-table-column>
      <el-table-column label="发送时间" align="center" prop="create_time" width="130" />
      <el-table-column label="阅读时间" align="center" prop="read_time" width="130" />
    </el-table>
    <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.page"
      v-model:limit="queryParams.page_size" @pagination="hanldeTaskList" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { messageInfoList } from "@/api/exam/index";

const props = defineProps({
  postId: {
    type: Number,
    default: 0,
  }
});

onMounted(() => {
  hanldeTaskList();
})

const queryParams = reactive<any>({
  page: 1,
  page_size: 10,
});

// 消息列表
const msgList = ref<any[]>([]);
const total = ref(0);
const hanldeTaskList = () => {
  messageInfoList({
    ...queryParams,
    test_id: props.postId
  }).then(res => {
    msgList.value = res.data.data;
    total.value = res.data.total;
  })
}

</script>

<style lang="scss" scoped></style>
